// import logo from './logo.svg';
// import './App.css';
import OnClick from './Onclick'
import App2 from './App2.jsx';
import State from './State.jsx'
import StateControl from './StateControl'

let str = 'good morning'
let flag = true
setInterval(() => {
    flag = !flag
}, 1000);

let fn=()=> 'fnback'

let arr = [{name:'first',id:0},{name:'second',id:1},{name:'third',id:2}]

function App() {
  return (
    <div className="App">
      <span>10</span>
      <span>{10 + 19}</span>
      <div>{str + 'thanks'}</div>
      <div>{flag ? 'true' : 'false'}</div>
      <div>{flag && "右边短路函数"}</div> 
      <div>{fn()}</div>
      <h1 style={{backgroundColor:'red'}}>red</h1>
      <ul>
        {
          arr.map(item=> <li key={item.id}>{item.name}</li>)
        }
      </ul>

    <hr />
      <App2 />
      <hr />
      <OnClick></OnClick>
      <hr />
      <State></State>
      <hr />
      <StateControl></StateControl>
    </div>
  );
}

export default App;
